<template>
  <div>
    <div class="top-toolbar">
      <Button @click="isShowFormDialog1=true;initData()" type="primary" icon="plus">新建广告
      </Button>
    </div>
    <Modal v-model="isShowFormDialog1" width="900" :title="isEditing?'修改广告':'添加广告'">
      <Form ref="form1" class="common-form" :model="form1Data" :rules="formRuleValidate1" :label-width="90">
        <FormItem label="广告类型" prop="adTypeId">
          <Select v-model="form1Data.adTypeId" placeholder="广告类型">
            <Option v-for="item in adTypeList" :value="item.id" :key="item.id">{{ item.title}}
            </Option>
          </Select>
        </FormItem>
        <FormItem label="广告标题" prop="title">
          <Input v-model="form1Data.title" placeholder="请输入广告标题" />
        </FormItem>
        <FormItem label="广告链接" prop="link">
          <Input v-model="form1Data.link" placeholder="请输入广告链接" />
        </FormItem>
        <Row>
          <Col :span="12">
            <FormItem label="广告封面" prop="cover">
              <Upload ref="upload" :show-upload-list="false" :on-success="handleSuccess" :format="['jpg','jpeg','png']"
                name="img_file" :max-size="2048" type="drag" :action="'/admin/upload/pic'|absUrl" class="cover-img-uploader">
                <img :src="form1Data.cover" class="cover-img" v-if="form1Data.cover">
                <div v-else class="cover-img">
                  <Icon type="camera" size="20"></Icon>
                </div>
              </Upload>
            </FormItem>
          </Col>
          <Col :span="12">
          <FormItem label="排序" prop="sort">
            <InputNumber v-model="form1Data.sort"></InputNumber>
          </FormItem>
          </Col>
        </Row>

      </Form>

      <div slot="footer">
        <Button type="text" size="large" @click="isShowFormDialog1=false">取消</Button>
        <Button type="primary" size="large" :loading="isSubmitingForm1" @click="onOkFormDialog">确定</Button>
      </div>
    </Modal>
    <Table :columns="columns1" :data="data1"></Table>
    <div class="pager-area">
      <Page :total="total" show-total show-elevator @on-change="onChangePage"></Page>
    </div>

  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      visible: false,
      form1Data: {
        adTypeId: 0,
        link: '',
        title: '',
        cover: '',
        sort: 0
      },
      formRuleValidate1: {
        title: [{
          required: true,
          message: '请输入广告名称',
          trigger: 'change'
        }],
        price: [{
          required: true,
          message: '请输入广告价格',
          trigger: 'change',
          type: 'number'
        }],
        type_id: [{
          required: true,
          message: '请选择广告类型',
          trigger: 'blur',
          type: 'number'
        }],
        percent: [{
          required: true,
          message: '请输入广告概率（百分比）',
          trigger: 'change',
          type: 'number'
        }],
        cover: [{
          required: true,
          message: '请上传广告图片',
          trigger: 'change'
        }]
      },
      total: 0,
      queryParams: {},
      awardTypeList: [],
      data1: [],
      isEditing: false,
      isShowFormDialog1: false,
      isSubmitingForm1: false,
      columns1: [{
        key: 'title',
        title: '广告名称'
      },
      {
        key: 'album_name',
        title: '故事集合',
        render: (h, params) => {
          return h('span', params.row.album_name || '--')
        }
      },
      {
        key: 'type_name',
        title: '广告类型'
      },
      {
        key: 'price',
        title: '广告价格'
      },
      {
        key: 'percent',
        title: '百分比'
      },

      {
        title: '广告图片',
        key: 'cover',
        render: (h, params) => {
          return h(
            'div',
            [
              h('img', {
                domProps: {
                  src: params.row.cover
                },
                style: {
                  width: '100px'
                }
              })
            ],
            params.row.cover
          )
        }
      },

      {
        title: '创建时间',
        key: 'create_time'
      },
      {
        title: '修改时间',
        key: 'modify_time'
      },
      {
        title: '操作',
        key: '_',
        render: (h, params) => {
          return h('div', [
            h(
              'Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '15px'
                },
                on: {
                  click: () => {
                    this.edit(params)
                  }
                }
              },
              '修改'
            ),
            h(
              'Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params)
                  }
                }
              },
              '删除'
            )
          ])
        }
      }
      ]
    }
  },
  methods: {
    initData () {
      this.form1Data = {
        type_id: 0,
        album_id: 0,
        title: '',
        note: '',
        cover: ''
      }
    },
    handleSuccess (res, file) {
      this.form1Data.cover = this.imgUrl(res.data.fileUrl)
    },
    edit (params) {
      this.form1Data = Object.assign({}, params.row)
      this.isShowFormDialog1 = true
    },
    onChangePage (page) {
      this.queryParams.page = page
      this.showLoading()
      this.loadData(_ => {
        this.hideLoading()
      })
    },
    handleView (name) {
      this.imgName = name
      this.visible = true
    },
    remove (params) {
      let id = params.row.id
      if (id) {
        this.$Modal.confirm({
          title: '删除提示',
          loading: true,
          content: '<p>确定删除该记录吗？</p>',
          onOk: () => {
            this.post('/admin/award/remove', {
              id
            }).then(_ => {
              this.$Message.success('删除成功')
              this.loadData()
              this.$Modal.remove()
            })
          }
        })
      }
    },
    onOkFormDialog () {
      this.$refs['form1'].validate(valid => {
        if (valid) {
          this.isSubmitingForm1 = true
          this.showLoading()
          this.post('/admin/award/save', this.form1Data)
            .then(res => {
              this.loadData()
              this.hideLoading()
              this.isShowFormDialog1 = false
              this.isSubmitingForm1 = false
              this.$Message.success('操作成功')
              this.form1Data = {}
            })
            .catch(_ => {
              this.hideLoading()
              this.isShowFormDialog1 = false
              this.isSubmitingForm1 = false
            })
        }
      })
    },
    loadData (callback) {
      this.post('/admin/award/list', this.queryParams)
        .then(data => {
          callback && callback()
          this.data1 = data.rows
          this.total = data.total
        })
        .catch(_ => {
          callback && callback()
        })
    }
  },
  mounted () {
    this.showLoading()
    this.loadData(_ => {
      this.hideLoading()
    })
    this.get('/admin/storyAlbum/queryAsOptions').then(data => {
      this.storyAlbumList = data
    })

    this.get('/admin/awardType/queryAsOptions').then(data => {
      this.awardTypeList = data
    })
  }
}

</script>

<style scoped>
  .cover-img {
    width: 100px;
    display: block;
    height: 100px;
  }

  .cover-img-uploader {
    width: 100px;
    line-height: 100px;
    height: 100px;
  }

</style>
